<template>
	<view class="app-contanier">
		<view class="search">
			<u-search placeholder="搜索工号/姓名/表单编号" v-model="queryParams.keywords"></u-search>
		</view>
		<view class="con">
			<view class="currentList">
				<u-subsection :list="currentList" :current="current" @change="handleChangeSub"></u-subsection>
			</view>
			<view class="applyList">
				<view class="applyItem"  :class="item.status === '1' ? 'appending' : '' "  v-for="(item,index) in list" :key='index'>
					<view class="title">
						{{item.title}}
						<view class="status">
							已通过
						</view>
					</view>
					<view class="item">
						申请人名称：{{item.empName}}
					</view>
					<view class="item">
						开始时间：{{item.startTime}}
					</view>
					<view class="item">
						结束时间：{{item.endTime}}
					</view>
					<view class="item">
						请假时数：{{item.total}}
					</view>
					<view class="item">
						请假原因：{{item.reason}}
					</view>
					<view class="item">
						详细说明：{{item.remark}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentList:['全部','审核中','已驳回','已通过'],
				current:0,
				queryParams:{
					keywords:''
				},
				list:[
					{
						empName:'张三阿',
						total:10,
						title:'请假申请',
						status:'1',
						startTime:'2015-05-02 05:00',
						endTime:'2015-05-02 15:00',
						reason:'其他',
						remark:'撒娇啊拉开觉得'
					},
					{
						empName:'张三阿',
						total:10,
						title:'请假申请',
						status:'2',
						startTime:'2015-05-02 05:00',
						endTime:'2015-05-02 15:00',
						reason:'其他',
						remark:'撒娇啊拉开觉得'
					}
				],
			};
		},
		methods:{
			handleChangeSub(index){
				this.current = index
			}
		}
	}
</script>

<style lang="scss">
	.app-contanier{
		
		background-color: #eaeaea;
		min-height: 100vh;
		box-sizing: border-box;
		.search{
			background-color: #fff;
			padding: 14px 6px;
		}
		.con{
			
			.currentList{
				background-color: #fff;
				padding: 6px;
			}
		}
		.applyList{
			.applyItem{
				background-color: #fff;
				padding: 12px;
				margin: 0 6px;
				margin-top: 8px;
				font-size: 15px;
				border-left: 5px solid #78fa78;
				border-radius: 4px;
				.title{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.status{
						color: #ccc;
					}
				}
			}
			
			.appending{
				border-left:5px solid orange !important;
			}
			.applyItem + .applyItem{
			}
			
		}
	}

</style>
